import React, { Component } from 'react'
import "./GoodList.scss"
import { NavBar, Icon, Tabs, WhiteSpace, Badge, Toast } from 'antd-mobile';
import myaxios from "../../utils/myaxios";
import SearchInput from "../searchInput/SearchInput";
import emptyProduct from "../../assets/images/empty_product.jpg";

export default class GoodList extends Component {
    constructor(props) {
        super(props)
        this.goodlistref = React.createRef();
        this.pagenum = 1;
        this.pagesize = 10
    }
    state = {
        tabs: [
            { title: '综合' },
            { title: '销量' },
            { title: '价格' },
        ],
        goods: []
    }
    componentDidMount() {
        let { search } = this.props.location
        let params = search.split('?')[1] || ''
        let params_arr = params.split('=')
        if (params_arr[0] === 'cid') {
            this.cid = params_arr[1]
        } else if (params_arr[0] === 'query') {
            this.query = params_arr[1]

        }
        this.goodproductlist()
        console.log(this.goodlistref.current.parentElement);
        this.goodlistref.current.parentElement.addEventListener(
            "scroll",

            this.handlescroll
        );

    }
    handlescroll = () => {
        
        let parentElment = this.goodlistref.current.parentElement
        let clientHeight = parentElment.clientHeight;
        //   console.log(clientHeight);
        let scrollHeight = parentElment.scrollHeight;
        //   console.log(scrollHeight);
        let scrollTop = parentElment.scrollTop
        //   console.log(scrollTop);
        // console.log(scrollHeight - scrollTop - clientHeight);
        if (scrollHeight - scrollTop - clientHeight <= 1) {

            this.goodproductlist()
        }
    }
    goodproductlist = () => {
        let params = {}
        if (this.cid) {
            params['cid'] = this.cid
        }
        if (this.query) {
            params['query'] = decodeURIComponent(this.query)
        }
        if (this.total) {
            params["pagenum"] = ++this.pagenum;
        } else {
            params["pagesize"] = this.pagesize;

        }
        if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
            Toast.info("已经是最后一条数据啦", 1);
        } else {
            myaxios.get('goods/search', {
                params: params
            }).then((res) => {
                
                this.total = res.total
                this.pagenum = res.pagenum
                this.setState({
                    goods: [...this.state.goods, ...res.goods], // 追加数据

                })
            }).catch((err) => {
                console.log(err);
            })
        }


    }
    render() {
        return (
            <div className='yg-goods-list'>
                <div className='yg-nav-bar'>
                    <NavBar
                        className='nav-bar'
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => {
                            window.history.go(-1)
                        }}
                    >商品列表</NavBar>
                </div>
                <div className="yg-goodslist-search">
                    <SearchInput></SearchInput>
                </div>
                <div className='yg-goodslist-taber'>
                    <Tabs
                        tabs={this.state.tabs}
                        initialPage={1}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div className='gl-tab-zh' ref={this.goodlistref}>
                            {
                                this.state.goods.map((v) => {
                                    return (
                                        <div className='product-list-item'>
                                            <div className='item-left'>
                                                <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                                            </div>
                                            <div className='item-right'>
                                                <div className="item-right-top">{v.goods_name}</div>
                                                <div className="item-right-bottom">￥{v.goods_price}</div>
                                            </div>

                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                height: "150px",
                                backgroundColor: "#fff",
                            }}
                        >
                            销量
                        </div>
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                height: "150px",
                                backgroundColor: "#fff",
                            }}
                        >
                            价格
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }
}
